<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统中心</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-form :model="searchForm" class="demo-form-inline" >
        <el-row :gutter="20">
          <el-form-item>
            <el-col :span="5">
              <el-input placeholder="名称" v-model="searchForm.roleName"></el-input>
            </el-col>
            <el-button @click="searchRoles" plain type="info">搜索</el-button>
            <el-button @click="roleFormVisible=true" type="primary">添加角色</el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table
        :data="roleList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="角色名称"
          prop="roleName"
          width="180">
        </el-table-column>
        <el-table-column
          label="备注"
          prop="remarks"
          width="180">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="getRole(scope.row.id)" size="small" type="text">编辑</el-button>
            <el-button @click="rolePower(scope.row)" size="small" type="text">角色授权</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <el-dialog :close-on-click-modal="false" :title="roleForm.id==null?'添加角色':'编辑角色'" :visible.sync="roleFormVisible"
                 @closed="crearRoleForm"> <!--用户表单框 -->
        <el-form :model="roleForm" label-width="100px" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色名">
                <el-input v-model="roleForm.roleName" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="roleForm.remarks">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="roleFormVisible = false">取 消</el-button>
          <el-button @click="saveRole()" type="primary">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog :close-on-click-modal="false" title="角色授权" :visible.sync="powerVisible"
                 @closed="crearRoleForm"> <!--用户表单框 -->
        <el-form  label-width="100px" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色">
                <el-input v-model="roleName" size="small" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-tree
                  ref="menuTree"
                  :data="data"
                  :expand-on-click-node="false"
                  default-expand-all
                  node-key="id"
                  :default-checked-keys="menuIds"
                  :check-strictly="true"
                  show-checkbox>
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span> <i :class="data.icon"></i> &nbsp;{{ data.menuName }}</span>
                </span>
                </el-tree>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="roleFormVisible = false">取 消</el-button>
          <el-button @click="saveRoleMenu()" type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "RoleList",
        data(){
          return{
            data:[{
              id: 0,
              icon: 'el-icon-s-tools',
              menuName: '用户管理系统',
              children: []
            }],
            roleFormVisible: false,
            searchForm:{
              roleName:''
            },
            roleForm:{

            },
            roleList:[],
            page: {
              pagenum: 0,
              pagesize: 5
            },
            total: 0,
            powerVisible:false,
            roleName:'',
            roleId:null,
            menuIds:[]
          }
        },
        methods:{
          saveRoleMenu:function(){//保存角色菜单权限
            let ids1=this.$refs.menuTree.getHalfCheckedKeys();//获取半开节点的所有key的数组
            let ids2=this.$refs.menuTree.getCheckedKeys();//获取选中节点数组
            this.menuIds=ids1.concat(ids2);//两个数组合并

            var formdata=new FormData();
            formdata.append("roleId",this.roleId);
            formdata.append("menuIds",this.menuIds);

            this.$http.post("/roleMenu/save",formdata).then((res)=>{
              if (res.data.success) {
                this.$message.success(res.data.message);
              }else{
                this.$message.error(res.data.message);
              }
              this.powerVisible=false;
            });
          },
          rolePower: async function (row) {//角色授权dialog显示
            var res = await this.$http.get("/menu/getTree");
            this.data[0].children = res.data.result;  //查询菜单树的数据，渲染

            this.powerVisible = true;  //展示dialog框架
            this.roleId = row.id;
            this.roleName = row.roleName;//角色名赋值

              this.$http.get("/roleMenu/getByRoleId/"+row.id).then((res)=>{         //请求后台通过角色的id获取当前角色menuids；
                if (res.data.success) {
                    this.menuIds=res.data.result;
                    this.$refs.menuTree.setCheckedKeys([0]);
                } else {
                  this.$message.error(res.data.message);
                }
              });
          },
          saveRole:function(){
            this.$http.post("/role/save",this.roleForm).then((res) => {
              if (res.data.success) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              } else {
                this.$message.error(res.data.message);
              }
              //关闭dialog框
              this.roleFormVisible = false
              //重新加载列表
              this.searchRoles()
            });
          },
          getRole: function (id) {//查询当前id的角色
            this.$http.get("/role/get/" + id).then((res) => {
              if (res.data.success) {
                this.roleForm = res.data.result //赋值
                this.roleFormVisible = true //显示dialog框
              } else {
                this.$message.error(res.data.message);
              }
            });
          },
          searchRoles:function () {
            this.$http.post("/role/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
              this.roleList = res.data.result.list;
              this.total = res.data.result.total;
            });
          },
          crearRoleForm: function () {
            //清空数据
            this.roleForm = {}
          },
          handleSizeChange: function (val) {
            this.page.pagesize = val;
            this.searchUser();
          },
          handleCurrentChange: function (val) {
            this.page.pagenum = val;
            this.searchUser();
          },
        },
       mounted() {
          this.searchRoles();
       }
    }
</script>

<style scoped>

</style>
